import TinyReact from './TinyReact'

const root = document.getElementById('root')

const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h1 data-test="test">（编码必杀技）</h1>
    <div>
      嵌套 1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察：这个将会被改变)</h3>
    {2 == 1 && <div>如果 2 和 1 相等，渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert('你好')}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" value="987" />
  </div>
)

// const virtualDOM2 = (
//   <div className="container789">
//     <h1>你好 Tiny React 222222</h1>
//     <h1 data-test="test">（编码必杀技）</h1>
//     <div>
//       嵌套 2 <div>嵌套 2.2</div>
//     </div>
//     <h3>(观察：这个将会被改变)</h3>
//     {2 == 1 && <div>如果 2 和 1 相等，渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     <span>这是一段内容</span>
//     <button onClick={() => alert('你好789')}>点击我</button>
//     <h3>这个将会被删除</h3>
//     2, 3
//   </div>
// )
// // 原始组件
// const Heart = () => <span>&hearts;</span>

// TinyReact.render(virtualDOM, root)

// setTimeout(() => {
//   TinyReact.render(virtualDOM2, root)
// })

// class Alert extends TinyReact.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       title: "default title"
//     }
//     // 更改 handleChange 方法中的 this 指向 让 this 指向类实例对象
//     this.handleChange = this.handleChange.bind(this)
//   }
//   handleChange() {
//     // 调用父类中的 setState 方法更改状态
//     this.setState({
//       title: "changed title"
//     })
//   }
//   render() {
//     return (
//       <div>
//         <h2>{this.state.title}</h2>
//         <p id="568">987</p>
//         <p key="2">{this.props.message}</p>
//         <button onClick={this.handleChange}>change title</button>
//       </div>
//     )
//   }
// }
// class Alert2 extends TinyReact.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       title: "Alert2 title"
//     }
//     // 更改 handleChange 方法中的 this 指向 让 this 指向类实例对象
//     this.handleChange = this.handleChange.bind(this)
//   }
//   handleChange() {
//     // 调用父类中的 setState 方法更改状态
//     this.setState({
//       title: "changed title"
//     })
//   }
//   render() {
//     return (
//       <div>
//         <h2>{this.state.title}</h2>
//         <p key="2" id="568">{this.props.message}</p>
//         <button onClick={this.handleChange}>change title</button>
//       </div>
//     )
//   }
// }
// TinyReact.render(<Alert message="Hello React" />, root)

// setTimeout(() => {

//   TinyReact.render(<Alert2 message="Hello React2" />, root)
// })

// class DemoRef extends TinyReact.Component {
//   handle() {
//     console.log(this.input)
//     let value = this.input.value
//     console.log(value)
//   }
//   render() {
//     return (
//       <div>
//         <input type="text" ref={input => (this.input = input)} />
//         <button onClick={this.handle.bind(this)}>按钮</button>
//       </div>
//     )
//   }
// }

// class DemoRef extends TinyReact.Component {
//   handle() {
//     let value = this.input.value
//     console.log(value)
//     console.log(this.alert)
//   }
//   componentDidMount() {
//     console.log("componentDidMount")
//   }
//   render() {
//     return (
//       <div>
//         <input type="text" ref={input => (this.input = input)} />
//         <button onClick={this.handle.bind(this)}>按钮</button>
//         <Alert ref={alert => (this.alert = alert)} />
//       </div>
//     )
//   }
// }

// TinyReact.render(<DemoRef message="Hello React2" />, root)


class KeyDemo extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      persons: [
        {
          id: 1,
          name: "张三"
        },
        {
          id: 2,
          name: "李四"
        },
        {
          id: 3,
          name: "王五"
        },
        {
          id: 4,
          name: "赵六"
        }
      ]
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    const newState = JSON.parse(JSON.stringify(this.state))
    // let obj = newState.persons.shift()
    // obj.name = 'test'
    // newState.persons.push(obj)
    newState.persons = [
      {
        id: 3,
        name: "王五"
      },
      {
        id: 2,
        name: "李四"
      },
      {
        id: 1,
        name: "张三"
      },
      
      
      {
        id: 4,
        name: "赵六"
      }
    ]
    // newState.pernewStatesons.pop()
    console.log(newState)
    this.setState(newState)
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.persons.map(person => (
            <li key={person.id}>
              {person.name}
            </li>
          ))}
        </ul>
        <button onClick={this.handleClick}>按钮</button>
      </div>
    )
  }
}
function Test () {
  return (
    <div>test</div>
  )
}
// console.log(<KeyDemo />)
console.log(virtualDOM)
// TinyReact.render(<KeyDemo />, root)

// setTimeout(() => {
//   TinyReact.render(<Test />, root)
// }, 3000)